<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="mygameCanvas" width="600px" height="600px"></canvas>

<script>
    var canvas=document.getElementById("mygameCanvas");
    var ctx=canvas.getContext("2d");

    var bgReady=false;
    var bgImage=new Image();
    bgImage.src="../tupian/game.jpg";
    bgImage.onload=function () {
        bgReady=true;
    }

    var marioReady=false;
    var  marioImage=new Image();
    marioImage.src="../tupian/3.png"
    marioImage.onload=function () {
        marioReady=true;
    }
    var monsterReady = false;
    var monsterImage = new Image();
    monsterImage.src = "../tupian/2.png";
    monsterImage.onload = function(){
        monsterReady = true;
    }

    var mario={
        speed:250,
        x:canvas.width/2,
        y:canvas.height/2
    }

    function monster() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.speed = 100;
        this.xDirection = 1;
        this.yDirection = 1;
        this.move = function (modifier) {
            this.x += this.xDirection * this.speed * modifier;
            this.y += this.yDirection * this.speed * modifier;
            if (this.x >= canvas.width - 32)
            {
                this.x = canvas.width - 32;
                this.xDirection = -1;
            }else if (this.x <= 0)
            {
                this.x = 0;
                this.xDirection = 1;
            }else if (this.y >= canvas.height - 32)
            {
                this.y = canvas.height - 32;
                this.yDirection = -1;
            }else if (this.y <= 0)
            {
                this.y = 0;
                this.yDirection = 1;
            }
        };
    }
    var monsterSum = 0;
    var monsterList = new Array();
    monsterList[monsterSum] = new monster();
    var keysDown = {};
    addEventListener(
        "keydown",
        function (e) {
            keysDown[e.keyCode] = true;
        }
    );
    addEventListener(
        "keyup",
        function (e) {
            //delete 操作符用于删除对象的某个属性
            delete keysDown[e.keyCode];
        }
    );
 function keysDown() {
     addEventListener(
         "keydown",
         function (e) {
             keyDown[e.keyCode]=true;
         }
     );
     addEventListener(
         "keyup",
         function (e) {
             delete keyDown[e.keyCode];
         }
     );
 }

 function Move(modifier) {

     if (38 in keysDown) {
         mario.y -= mario.speed * modifier;
     }
     if (40 in keysDown) {
         mario.y += mario.speed * modifier;
     }
     if (37 in keysDown) {
         mario.x -= mario.speed * modifier;
     }
     if (39 in keysDown) {
         mario.x += mario.speed * modifier;
     }

     if (mario.x >= canvas.width - 32) {
         mario.x = 0;
     } else if (mario.x <= 0) {
         mario.x = canvas.width - 32;
     }
     if (mario.y >= canvas.height - 32) {
         mario.y = 0;
     } else if (mario.y <= 0) {
         mario.y = canvas.height - 32;
     }
     for (var i = 0; i <= monsterSum; i++) {
         monsterList[i].move(modifier);
     }
 }
     function Draw() {
         if (bgReady) {
             ctx.drawImage(bgImage, 0, 0);
             if (marioReady) {
                 ctx.drawImage(marioImage, mario.x, mario.y);
             }
             if (monsterReady) {
                 for (var i = 0; i <= monsterSum; i++)
                     ctx.drawImage(monsterImage, monsterList[i].x, monsterList[i].y);
             }
         }
         ctx.fillStyle = "#FFFFFF";
         ctx.font = "24px Helvetica";
         ctx.textAlign = "left";
         ctx.textBaseline = "top";
         last = Date.now() - start;
         ctx.fillText(last / 1000, 12, canvas.height - 590);
     }

     function Check() {

         if (monsterSum != Math.floor(last / 5000)) {
             monsterSum++;
             monsterList[monsterSum] = new monster();
         }

         for (var i = 0; i <= monsterSum; i++) {
             if (
                 (monsterList[i].x - 32) <= mario.x
                 && mario.x <= (monsterList[i].x + 32)
                 && (monsterList[i].y - 32) <= mario.y
                 && mario.y <= (monsterList[i].y + 32)
             ) {
                 end = Date.now();
                 alert("你被怪物捉到了，游戏结束");
                 End();
             }
         }
     }


     var End = function () {
         if (bgReady) {
             ctx.drawImage(bgImage, 0, 0);
         }
         window.clearInterval(timer);
         return;
     }
     var main = function () {
         var now = Date.now();
         var delta = now - then;
         Move(delta / 1000);
         Draw();
         Check();

         then = now;
     }

 var then=Date.now();
     var start = then;
 var timer=setInterval(main,1);
</script>
</body>
</html>